 <template>
  <div>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="用户管理" name="first">
        <el-button @click="tabkaung">弹框</el-button>
        <h2 style="text-align: center">地方党政领导班子优秀年轻干部基本情况</h2>
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <p style="margin-left: 10px">填报单位:</p>
          <p>数字截止时间：2023年12月31日</p>
          <p style="margin-right: 10px">第一表</p>
        </div>
        <div class="table-container">
          <table v-loading="loading">
            <thead id="thead">
              <tr>
                <td colspan="2" rowspan="3" style="width:250px;">项目</td>
                <td rowspan="3">代码</td>
                <td rowspan="3">总计</td>
                <td class="borderNone" colspan="15">&nbsp;</td>
                <td colspan="4">最高学历</td>
                <td colspan="4">全日制学历</td>
              </tr>
              <tr>
                <td rowspan="2">女</td>
                <td rowspan="2">少数民族</td>
                <td rowspan="2">非中共党员</td>
                <td rowspan="2">博士</td>
                <td rowspan="2">硕士</td>
                <td rowspan="2">学士</td>
                <td rowspan="2">具有2年以上基层工作经验</td>
                <td rowspan="2">有企业、高校、科研院所正职领导任职经历</td>
                <td rowspan="2">高级职称</td>
                <td rowspan="2">参加理论培训</td>
                <td class="borderNone" colspan="1">&nbsp;</td>
                <td colspan="3">实践锻炼</td>
                <td rowspan="2">近期可提拔使用</td>

                <td rowspan="2">研究生</td>
                <td rowspan="2">大学本科</td>
                <td rowspan="2">大学专科</td>
                <td rowspan="2">中专及以下</td>
                <td rowspan="2">研究生</td>
                <td rowspan="2">大学本科</td>
                <td rowspan="2">大学专科</td>
                <td rowspan="2">中专及以下</td>
              </tr>
              <tr>
                <td>出国出境培训</td>
                <td>本单位岗位轮换</td>
                <td>交流任职</td>
                <td>挂职锻炼</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td colspan="2">行</td>
                <td>列</td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
                <td>10</td>
                <td>11</td>
                <td>12</td>
                <td>13</td>
                <td>14</td>
                <td>15</td>
                <td>16</td>
                <td>17</td>
                <td>18</td>
                <td>19</td>
                <td>20</td>
                <td>21</td>
                <td>22</td>
                <td>23</td>
                <td>24</td>
              </tr>
              <tr v-for="(item, index) in tableList" :key="index">
                <td v-if="item.describe" :rowspan="item.rowspan">
                  {{ item.describe }}
                </td>
                <td :colspan="item.colspan">{{ item.title }}</td>
                <td>{{ index + 1 }}</td>
                <td>{{ tableData[index].amount1 }}</td>
                <td>{{ tableData[index].amount1 }}</td>
                <td>{{ tableData[index].amount1 }}</td>
                <td>{{ tableData[index].amount1 }}</td>
                <td>{{ tableData[index].amount1 }}</td>
                <td>{{ tableData[index].amount1 }}</td>
                <td>{{ tableData[index].amount1 }}</td>
                <td>{{ tableData[index].amount1 }}</td>
                <td>{{ tableData[index].amount1 }}</td>
                <td>{{ tableData[index].amount1 }}</td>
                <td>{{ tableData[index].amount1 }}</td>
                <td>{{ tableData[index].amount1 }}</td>
                <td>{{ tableData[index].amount1 }}</td>
                <td>{{ tableData[index].amount1 }}</td>
                <td>{{ tableData[index].amount1 }}</td>
                <td>{{ tableData[index].amount1 }}</td>
                <td>{{ tableData[index].amount1 }}</td>
                <td>{{ tableData[index].amount1 }}</td>
                <td>{{ tableData[index].amount1 }}</td>
                <td>{{ tableData[index].amount1 }}</td>
                <td>{{ tableData[index].amount1 }}</td>
                <td>{{ tableData[index].amount1 }}</td>
                <td>{{ tableData[index].amount1 }}</td>
                <td>{{ tableData[index].amount1 }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="配置管理" name="second"> </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // tableData:[],
      tableData: [
        {
          id: "12987122",
          name: "行",
          amount1: "内容",
          amount2: "3.2",
          amount3: 10,
        },
        {
          id: "12987123",
          name: "可作为副省级城市党政副职培养的干部",
          amount1: "165",
          amount2: "4.43",
          amount3: 12,
        },
        {
          id: "12987124",
          name: "正地厅级单位",
          children: "可作为（地、州、盟）党政正职培养的干部",
          amount1: "324",
          amount2: "1.9",
          amount3: 9,
        },
        {
          id: "12987125",
          name: "正地厅级单位",
          amount1: "621",
          children: "可作为（地、州、盟）党政副职培养的干部",
          amount2: "2.2",
          amount3: 17,
        },
        {
          id: "12987126",
          name: "正地厅级单位",
          children: "可作为省直机关正职培养的干部",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },
        {
          id: "12987126",
          name: "正地厅级单位",
          children: "可作为省直机关副职培养的干部",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },

        {
          id: "12987124",
          name: "副地厅级单位",
          children: "可作为副地厅级行政区党政正职培养的干部",
          amount1: "324",
          amount2: "1.9",
          amount3: 9,
        },
        {
          id: "12987125",
          name: "副地厅级单位",
          amount1: "621",
          children: "可作为副地厅级行政区党政副职培养的干部",
          amount2: "2.2",
          amount3: 17,
        },
        {
          id: "12987126",
          name: "副地厅级单位",
          children: "可作为省直机关正职培养的干部",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },
        {
          id: "12987126",
          name: "副地厅级单位",
          children: "可作为省直机关副职培养的干部",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },
        {
          id: "12987126",
          name: "副地厅级单位",
          children: "可作为副省级城市市直机关正职培养的干部",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },
        {
          id: "12987126",
          name: "副地厅级单位",
          children: "可作为副省级城市市直机关副职培养的干部",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },

        {
          id: "12987125",
          name: "正县处级单位",
          amount1: "621",
          children: "可作为（市、区、旗）党政正职培养的干部",
          amount2: "2.2",
          amount3: 17,
        },
        {
          id: "12987126",
          name: "正县处级单位",
          children: "可作为（市、区、旗）党政副职培养的干部",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },
        {
          id: "12987126",
          name: "正县处级单位",
          children: "可作为（地、州、盟）市直机关正职培养的干部",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },
        {
          id: "12987126",
          name: "正县处级单位",
          children: "可作为（地、州、盟）市直机关副职培养的干部",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },
      ],
      tableList: [
        {
          title: "可作为副省级城市党政副职培养的干部",
          colspan: 2,
          describe: "",
          rowspan: "",
        },
        {
          describe: "正地厅级单位",
          title: "可作为（地、州、盟）党政正职培养的干部",
          colspan: "",
          rowspan: 4,
        },
        {
          title: "可作为（地、州、盟）党政副职培养的干部",
          colspan: "",
          describe: "",
          rowspan: "",
        },
        {
          title: "可作为省直机关正职培养的干部",
          colspan: "",
          describe: "",
          rowspan: "",
        },
        {
          title: "可作为省直机关副职培养的干部",
          colspan: "",
          describe: "",
          rowspan: "",
        },

        {
          title: "可作为副地厅级行政区党政正职培养的干部",
          colspan: "",
          describe: "副地厅级单位",
          rowspan: 6,
        },
        {
          title: "可作为副地厅级行政区党政副职培养的干部",
          colspan: "",
          describe: "",
          rowspan: "",
        },
        {
          title: "可作为省直机关正职培养的干部",
          colspan: "",
          describe: "",
          rowspan: "",
        },
        {
          title: "可作为省直机关副职培养的干部",
          colspan: "",
          describe: "",
          rowspan: "",
        },
        {
          title: "可作为副省级城市市直机关正职培养的干部",
          colspan: "",
          describe: "",
          rowspan: "",
        },
        {
          title: "可作为副省级城市市直机关副职培养的干部",
          colspan: "",
          describe: "",
          rowspan: "",
        },

        {
          title: "可作为（市、区、旗）党政正职培养的干部",
          colspan: "",
          describe: "正县处级单位",
          rowspan: 4,
        },
        {
          title: "可作为（市、区、旗）党政副职培养的干部",
          colspan: "",
          describe: "",
          rowspan: "",
        },
        {
          title: "可作为（地、州、盟）市直机关正职培养的干部",
          colspan: "",
          describe: "",
          rowspan: "",
        },
        {
          title: "可作为（地、州、盟）市直机关副职培养的干部",
          colspan: "",
          describe: "",
          rowspan: "",
        },
      ],
      activeName: "first",
      width: 0,
      height: 0,
      loading: false,
      isDragging: false, // 是否处于拖拽状态
      startX: 0, // 鼠标按下时的X坐标
      startWidth: 0, // 列的宽度在拖拽时会发生变化，需要记录初始宽度
      x: 0,
      y: 0,
    };
  },
  mounted() {
    this.initializeResizableColumns();
  },
  methods: {
    tabkaung(){
        
    },
    initializeResizableColumns() {
      const table = document.getElementById("thead");
      const headerCells = table.rows[0].cells;
      const cells = table.querySelectorAll("td");

      let pressed = false; // 是否按下鼠标
      let startX; // 按下鼠标时的X坐标
      let startWidth; // 列宽度

      // 鼠标移动事件
      document.addEventListener("mousemove", (e) => {
        if (!pressed) return;
        tTD.style.cursor = "col-resize";

        let offset = e.clientX - startX;
        let newWidth = startWidth + offset;

        if (newWidth > 0) {
          const cellIndex = tTD.cellIndex;
          const tableWidth = table.offsetWidth;

          tTD.style.width = newWidth + "px";

          for (let i = 0; i < cells.length; i++) {
            if (cells[i].cellIndex === cellIndex) {
              cells[i].style.width = newWidth + "px";
            }
          }

          for (let i = 0; i < headerCells.length; i++) {
            if (headerCells[i].cellIndex === cellIndex) {
              headerCells[i].style.width = newWidth + "px";
            }
          }

          table.style.width = tableWidth + offset + "px";
        }
      });

      // 鼠标松开事件
      document.addEventListener("mouseup", (e) => {
        if (!tTD) return;

        pressed = false;
        tTD.style.cursor = "default";
      });

      // 单元格按下事件
      let tTD; // 当前选中的单元格

      for (let i = 0; i < cells.length; i++) {
        cells[i].addEventListener("mousedown", (e) => {
          if (e.offsetX > cells[i].offsetWidth - 10) {
            pressed = true;
            startX = e.clientX;
            startWidth = cells[i].offsetWidth;
            tTD = e.target;
            tTD.style.cursor = "col-resize";
          }
        });
      }
    },
  },
};
</script>


<style scoped>
.table-container {
  height: 800px;
  overflow-y: auto;
  border-top: 1px solid #dcdfe6;
}
table {
  width: 100%;
  border-top: 1px solid #dcdfe6;
  border-right: 1px solid #dcdfe6;
  table-layout: fixed;
  border-collapse: collapse;
}
thead {
  position: sticky;
  top: 0;
  border-top: 1px solid #dcdfe6;
  background-color: #fff;
}
table .borderNone {
  border-left: none;
}
table > thead > tr {
  background-color: #f5f7fa;
}
 table td {
  word-wrap: break-word;
  font-size: 20px;
  text-align: center;
  /* padding: 5px 10px; */
  border-bottom: 1px solid #dcdfe6;
  border-left: 1px solid #dcdfe6;
}
</style>